<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul></ul>
</body>
</html>
<script>
    // vue3 使用 Proxy 来 进行数据劫持


    const ul = document.querySelector('ul')

    const obj = {
        name:'hong',
        age:19
    }

    function render(obj){
        ul.innerHTML = `
            <li>
                <span>name:</span>
                <span>${obj.name}</span>    
            </li>
            <li>
                <span>age:</span>
                <span>${obj.age}</span>    
            </li>
        `
    }

    render(obj)

    function proxy(obj,render){
        return new Proxy(obj,{
            set(target,key,val){
                target[key] = val
                render(obj)
            },
            get(target,key){
                return target[key]
            }
            
        })
    }

    const vm = proxy(obj,render)






</script>